.recommend-box {
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.recommend-box-img {
    width: 100%;
    position: relative;
    padding-bottom: 30%;
}

.recommend-box-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommend-box-title {
    color: var(--main-color);
    font-weight: 800;
    font-size: 16px;
    margin: 10px 0;
    padding: 0 10px;
    user-select: text;
}

.recommend-box-title.text-overflow-ellipsis {
    -webkit-line-clamp: 1;
}

@media screen and (min-width: 1024px) {
    .recommend-box:hover {
        box-shadow: 0px 0px 10px var(--border-color);
    }

    .recommend-box:hover .recommend-box-title {
        color: var(--text-color);
    }
}